<template>
  <div>
    <van-row>
      <van-col span="6"><lef></lef></van-col>
      <van-col span="18">
        <van-row>
          <van-col span="24"><headers></headers></van-col>
        </van-row>
        <van-row>
          <van-col>

            <table>
              <tr v-for="(i,index) in list" :key="i.id">
                <td> <van-field :label="i.label" v-model="name[index]"></van-field></td>
                <td>
                  <select name="" id="" v-model="valueslist[index]">
                    <option value="input">输入框</option>
                    <option value="rideo">单选框</option>
                    <option value="checkbox">多选框</option>
                    <option value="select">下拉菜单</option>
                    <option value="sdate">日期</option>
                    <option value="file">文件类型</option>
                  </select>
                </td>
                <td>
                  <van-field label="值" v-model="values[index]"></van-field>
                  <van-button @click="get_source(index)">选择数据源</van-button>
                </td>
              </tr>

            </table>
            <van-button @click="addtable">+</van-button>
            <van-button @click="addform">提交</van-button>
            <br>
            <br>
            <el-dialog v-model="dialogTableVisible" title="Shipping address">
              <el-table
                  ref="singleTable"
                  :data="data_yuan"
                  highlight-current-row
                  style="width: 100%"
                  @current-change="handleCurrentChange"
              >
                <el-table-column type="index" width="50" />

                <el-table-column property="name" label="Name" width="120" />

              </el-table>

            </el-dialog>


          </van-col>
        </van-row>
      </van-col>

    </van-row>


  </div>
</template>

<script>
import Lef from "@/components/veiw/lef";
import Headers from "@/components/veiw/headers";
import myaxios from "@/http/axios";
export default {
  name: "workname",
  components: {Headers, Lef},
  data() {
    return {
      data1: '',
      id:this.$route.query.id,
      list:[{'label':'名称'}],
      name:{},
      values:{},
      valueslist:{},
      data_yuan:[],
      dialogTableVisible:false
    }
  },
  methods: {
    addtable(){
      this.list.push({'label':'名称'})
    },
    addform(){
      var slist = []
      for (var i=0;i<this.list.length;i++){
        let v = this.values[i]
        if (v){
          v = JSON.parse(v)
        }
        let dict = {
          'label':this.name[i],'type':this.valueslist[i],'value':v
        }
        slist.push(dict)
      }
      myaxios('addcoursedata?id='+this.id,'post',{data:JSON.stringify(slist)}).then(res=>{
        alert(res.msg)
      })
      console.log(slist)

    },
    handleCurrentChange(val){
        this.dialogTableVisible = false
        let index = localStorage.getItem('index')
        this.values[index] = JSON.stringify(val['mes'])
    },
    get_source(index){
      localStorage.setItem('index',index)
      myaxios('getcoursedata','get').then(res=>{
        this.data_yuan = res.list
      })
      this.dialogTableVisible = true
    }
  },
  mounted() {

  }
}
</script>

<style scoped>

</style>